<template>
  <div class="container">
    <div class="header">故障信息</div>

    <div style="overflow: hidden; width: 100%; height: 350px; font-size: 12px; line-height: 24px">
      <vue-seamless-scroll
        ref="scrollModule"
        :data="deviceLogList"
        class="echart-container"
        :class-option="defaultOption"
        :key="scrollKey"
      >
        <div
          style="display: flex; margin-bottom: 2px; border-bottom: 2px dashed #23cdd8; color: #bbb"
          v-for="(item, scrollindex) in deviceLogList"
        >
          <span style="width: 50px; color: #23cdd8; font-size: 20px; line-height: 48px; font-weight: bolder">{{
            scrollindex + 1
          }}</span>
          <div style="display: flex; flex-wrap: wrap">
            <div style="width: 400px; font-size: 20px">
              <span>故障类型：</span>
              <span style="color: #23cdd8">{{ item.machineryType }}</span>
            </div>
            <div style="width: 60px; align-items: flex-end; text-align: right">
              <span v-if="item.duration !== '0'" style="color: #ffdb5c"> 已处理 </span>
              <span v-else style="color: #ffdb5c">等待处理 </span>
            </div>
            <div style="width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
              <span>上报时间：</span>
              <span style="color: #fff">{{ item.createTime }}</span>
            </div>
            <div
              style="margin-bottom: 10px; width: 210px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis"
            >
              <span>处理时间：</span>
              <span style="color: #fff">{{ item.updateTime }}</span>
            </div>
          </div>
        </div>
      </vue-seamless-scroll>
    </div>
  </div>
</template>

<script>
  import vueSeamlessScroll from 'vue-seamless-scroll';
  import { listAlarm, listAlarmById } from '@/api/mes/dv/alarm';
  export default {
    props: {
      data: {
        default: () => {
          return {
            deviceLogList: [],
          };
        },
        typeof: Object,
      },
    },
    components: {
      vueSeamlessScroll,
    },
    data() {
      return {
        scrollKey: 0,
        deviceLogList: [],
        pageflag: true,
        defaultOption: {
          step: 2,
          limitMoveNum: 4,
          hoverStop: true,
          singleHeight: 80,
          autoPlay: false, // 是否自动滚动
          openWatch: true,
          waitTime: 3000,
        },
      };
    },
    mounted() {},
    watch: {
      data: {
        handler() {
          this.deviceLogList = this.data;
          // this.data.forEach((dataItem, idx) => {
          //   this.deviceLogList.push(dataItem);
          // })
          while (this.deviceLogList.length > 3) {
            this.deviceLogList.shift();
            //this.upDateKey(this.deviceLogList.length-7)
          }
        },
        immediate: true,
      },
    },
    created() {},
    beforeDestroy() {},
    methods: {
      upDateKey(val) {
        this.scrollKey = val;
      },
    },
  };
</script>
<style lang="scss" src="./container.scss" scoped></style>
